<template>
  <div class="app-container">
    <el-card class="box-card search-div">
      <el-form :inline="true">
        <el-form-item label="流程名称">
          <el-input placeholder="请输入查询的流程名称" v-model="searchName"/>
        </el-form-item>
        <el-button type="primary" @click="handleSearch" icon="el-icon-search">搜索</el-button>
        <el-button @click="handleReset" icon="el-icon-refresh">重置</el-button>
      </el-form>
    </el-card>
    <el-card class="box-card">
        <el-table :data="deployList" v-loading.body="deployListLoading" border fit highlight-current-row class="table-list">
            <el-table-column align="center" label="流程名称" prop="name"/>
            <el-table-column align="center" label="流程标识" prop="modelKey" width="180"/>
            <el-table-column align="center" label="流程类型" prop="category">
            <template slot-scope="scope">
                {{formatFlowableModeTypeName(scope.row.category)}}
            </template>
            </el-table-column>
            <el-table-column align="center" label="部署时间" prop="deployTime" width="150"/>
            <el-table-column align="center" label="操作" width="180" fixed="right">
                <template slot-scope="scope">
                <el-button v-if="permissions.flowable_start_task_add" type="warning" @click="showSendTask(scope.row)">发起流程</el-button>
                <el-button v-if="permissions.flowable_diagram" type="info" @click="viewDiagram(scope.row)">流程图</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination background @size-change="handleDeploySizeChange" @current-change="handleDeployCurrentChange" :current-page="listDeployQuery.page"
                :page-sizes="[10,20,30,50]" :page-size="listDeployQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="deployTotal">
            </el-pagination>
        </div>
    </el-card>
    <el-dialog title="发起流程" :width="'800px'" :visible.sync="showDialog" :close-on-click-modal="false">
        <el-tabs v-model="activeName">
            <el-tab-pane label="表单信息" name="first">
                <el-form ref="flowform" label-width="80px">
                    <el-row>
                        <FormBuildTCD ref="fbt" :options="formOptions"/>
                    </el-row>
                    <el-row type="flex" class="row-bg" justify="center">
                        <el-form-item>
                        <el-button type="primary" @click="handleSaveTask">保存待发</el-button>
                        <el-button type="success" @click="handleSendTask">发 送</el-button>
                        <el-button @click="showDialog=false">关 闭</el-button>
                        </el-form-item>
                    </el-row>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="流程图" name="second">
                <img :src="flowableImage" v-if="flowableImage" class="flowableImage">
            </el-tab-pane>
        </el-tabs>
    </el-dialog>
    <el-dialog title="流程图" :width="'800px'" :visible.sync="showDialogDiagram">
        <img :src="flowableImage" v-if="flowableImage" class="flowableImage">
    </el-dialog>
  </div>
</template>

<script>
import * as flowablePublish from '../flow/flowPublish'
import * as flowableModelType from '../flow/flowCategory'
import * as flowbleForm from '../flow/flowForm'
import * as task from './js/task'
import { mapGetters } from 'vuex'

export default {
  name: 'sendTaskList',
  data() {
    return {
      deployList: null,
      deployListLoading: false,
      deployTotal: 0,
      searchName: '',
      showDialog: false,
      showDialogDiagram: false,
      activeName: 'first',
      flowableImage: '',
      listDeployQuery: {
        page: 1, limit: 10, name: '',userId:''
      },
      modelTypeData:[],
      formOptions:{
        config: {
        labelPosition: "right",
        labelWidth: 15,
        },
        list: []
      },
      curRow:{}
    }
  },
  computed: {
    ...mapGetters(['permissions','userInfo'])
  },
  created() {
    this.listDeployQuery.userId = this.userInfo.id
    this.getDeployList()
    this.init()
  },
  methods: {
    init(){
      flowableModelType.fetchList({page:1,limit:1000,status:0}).then((response)=>{
        this.modelTypeData = response.data.records
      })
    },
    formatFlowableModeTypeName(id){
      var modelType = this.modelTypeData.filter(function(fp) {
        return fp.id == id
      })
      return modelType[0]?modelType[0].typeName:'';
    },
    getDeployList() {
        this.deployListLoading = true
        this.listDeployQuery.name = this.searchName
        flowablePublish.getSelfModelDeployList(this.listDeployQuery).then(response => {
            this.deployList = response.data.records
            this.deployTotal = response.data.total
            this.deployListLoading = false
        })
    },
    handleSearch() {
        this.listDeployQuery.page = 1
        this.getDeployList()
    },
    handleReset(){
        this.listDeployQuery = {
            page: 1, limit: 10, name: '', status: ''
        }
        this.searchName = ''
        this.getDeployList()
    },
    handleDeploySizeChange(val) {
        this.listDeployQuery.limit = val
        this.getDeployList()
    },
    handleDeployCurrentChange(val) {
        this.listDeployQuery.page = val
        this.getDeployList()
    },

    //发起流程
    showSendTask(row){
      this.curRow = row
      this.showDialog = true
      flowbleForm.getStartFormInfo(row.id).then((response)=>{
          var formModel = response.data.formModel
          if(formModel){//自定义表单
              this.formOptions = JSON.parse(formModel)
          }else{
              //TODO 代码编写的表单暂时还不支持
          }
      })
      flowablePublish.diagram(row.modelKey).then((response)=>{
          this.flowableImage = response.data
      })
    },
     //保存待发
    handleSaveTask(){
      const params = {
        deployId: this.curRow.id,
        businessKey:'auto_form:'+new Date().getTime(),
        variables: this.$refs.fbt.getFormData()
      };
      this.$refs.fbt.$refs.buildForm.validate((valid) => {//验证表单是否填写完整
        if (valid) {
            task.startProcessInstanceById(params).then(resp => {
               this.$message({ type: 'success', message: '操作成功!' })
               this.showDialog = false
               this.getDeployList()
            });
        }
      })
    },
    //发送
    handleSendTask() {
      const params = {
        deployId: this.curRow.id,
        businessKey:'auto_form:'+new Date().getTime(),
        variables: this.$refs.fbt.getFormData()
      };
      this.$refs.fbt.$refs.buildForm.validate((valid) => {//验证表单是否填写完整
        if (valid) {
            task.startProcessInstanceAndSendTaskById(params).then(resp => {
               this.$message({ type: 'success', message: '操作成功!' })
               this.showDialog = false
               this.getDeployList()
            });
        }
      })
    },
    //查看流程图
    viewDiagram(row){
      this.showDialogDiagram = true
       flowablePublish.diagram(row.modelKey).then((response)=>{
            this.flowableImage = response.data
        })
    }
  }
}
</script>
<style>
.el-dialog__body {
    padding: 0px 10px 0px 10px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
}
.el-dialog--center .el-dialog__body {
    text-align: initial;
    padding: 0px 25px 0px 25px;
}
</style>
